<template>
  <div class="carousel_container" >
    <div class="carousel_content">
      <!-- 左箭头按钮 -->
      <div v-if="arrowShow && picData.length > imgNum" class="leftBtn" @click="throttle('prev')">
        <i class="el-icon-arrow-left" />
      </div>
      <!-- 右箭头按钮 -->
      <div v-if="arrowShow && picData.length > imgNum" class="rightBtn" @click.stop="throttle('next')">
        <i class="el-icon-arrow-right" />
      </div>
      <!-- 轮播图 -->
      <div class="swipers">
        <div
          class="swipers_move"
          :style="{ left: `-${leftVal}px`, transition: `${ition}s` }"
          @touchstart="touchStart"
          @touchend="touchEnd"
        >
          <div v-for="(item, index) in swiperList" :key="index" class="swipers_move_item">
            <img class="swipers_move_item_img" v-for="(items, indexs) in item" :key="indexs + 'x'" v-lazy="items.imgUrl" @click.stop="previewImg" />
          </div>
          <div class="swipers_move_item">
            <img
              class="swipers_move_item_img"
              v-for="(items, indexs) in swiperList[0]"
              :key="indexs + 'y'"
              v-lazy="items.imgUrl"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 指示点 -->
    <div v-if="indicatorShow && swiperList.length > 1" class="indication_point">
      <div class="indication_point_content">
        <div
          v-for="(item, index) in swiperList.length"
          :key="index + 'indication'"
          :class="index === currentIndex ? 'indication_active': ''"
          @click="tapIndicator(index)"
          @mouseenter="tapIndicator(index)"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'carousel_container',
  props: {
    picData: {
      type: Array,
      default: () => [
        {
          imgUrl:
            'https://img14.360buyimg.com/pop/s590x470_jfs/t1/107362/20/24177/90602/6233decdE5627d944/b7194e538e3c8c7a.jpg',
        },
        {
          imgUrl:
            'https://img12.360buyimg.com/pop/s590x470_jfs/t1/204028/36/25480/101429/62f507a7Ec62b0cd3/db5984ae24ce0212.jpg',
        },
        {
          imgUrl:
            'https://imgcps.jd.com/ling4/100022552927/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e6/075268d0/cr/s/q.jpg',
        },
        {
          imgUrl:
            'https://imgcps.jd.com/ling4/100026667910/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e3/d7b3695b/cr/s/q.jpg',
        },
        {
          imgUrl:
            'https://img30.360buyimg.com/pop/s590x470_jfs/t1/201288/25/23710/64955/62f070fdE95cb4f47/22b916d938a43bb5.jpg',
        },
        {
          imgUrl:
            'https://img20.360buyimg.com/babel/s590x470_jfs/t1/147050/6/31926/85670/6357a9afE26ff5c66/3a6823f7820fb72b.jpg',
        },
        {
          imgUrl:
            'https://imgcps.jd.com/ling4/100003547337/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa3b/52f28740/cr/s/q.jpg',
        },
        {
          imgUrl:
            'https://imgcps.jd.com/ling4/100038004353/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa4b/665a2335/cr/s/q.jpg',
        },
        {
          imgUrl:
            'https://imgcps.jd.com/ling4/100005483298/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa42/0c491f4f/cr/s/q.jpg',
        },
        {
          imgUrl:
            'https://imgcps.jd.com/ling4/100038004353/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa4b/665a2335/cr/s/q.jpg',
        },
      ],
    },
    // 图片宽度140加上margin 10
    imgWidth: {
      type: Number,
      default: 150,
    },
    // 图片高度
    imgHeight: {
      type: Number,
      default: 140,
    },
    // 箭头是否显示 默认显示
    arrowShow: {
      type: Boolean,
      default: true,
    },
    // 指示点 默认显示
    indicatorShow: {
      type: Boolean,
      default: true,
    },
    // 一屏展示的图片数量 默认自适应
    showCount: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      leftVal: 0, // 轮播图盒子的偏移值
      flag: true, // 用来节流防止重复点击
      swiperWidth: 0,
      ition: 0.8, // 设置轮播图过度时间
      currentIndex: 0, // 表示当前显示的图片索引
      startX: 0, // 手指按下去的x轴位置
      endX: 0, // 手指离开屏幕的x轴位置
      swiperList: [],
      imgNum: 0, // 图片数量
    }
  },
  mounted() {
    this.resizeLogic()
    window.addEventListener('resize', () => {
      this.resizeLogic()
    })
  },
  methods: {
    resizeLogic() {
      this.leftVal = 0
      this.flag = true
      this.currentIndex = 0
      this.swiperList = []
      const innerWidth = this.arrowShow
        ? window.innerWidth - 60
        : window.innerWidth
      // 获取可展示的图片数量
      this.imgNum = this.showCount || Math.floor(innerWidth / this.imgWidth)
      this.configSwiper()
    },
    configSwiper() {
      // 设置轮播图盒子的宽度
      const swiperWidth = this.imgNum * this.imgWidth
      // 如果有箭头的话展示的区域是swiperWidth+60(箭头的宽度)
      if (this.arrowShow) {
        this.$el.querySelector('.carousel_content').style.width =
          swiperWidth + 60 + 'px'
      }
      this.$el.querySelector('.swipers').style.width = swiperWidth + 'px'
      this.$el.querySelector('.swipers').style.height = this.imgHeight + 'px'
      // 获取轮播图数据
      this.swiperList = this.getSwiperList(this.imgNum)
      this.swiperWidth = swiperWidth
      setTimeout(() => {
        this.$el
          .querySelectorAll('.swipers_move_item')
          .forEach((m) => (m.style.width = swiperWidth + 'px'))
        this.$el
          .querySelectorAll('.swipers_move_item_img')
          .forEach((f) => (f.style.width = this.imgWidth - 10 + 'px'))
      }, 0)
    },
    // 获取轮播图数据
    getSwiperList(num) {
      let imgList = []
      if (this.picData.length > num) {
        for (let i = 0; i < this.picData.length; i += num) {
          imgList.push(this.picData.slice(i, i + num))
        }
      } else {
        imgList.push(this.picData.slice(0, this.picData.length))
      }
      return imgList
    },
    // 开始滑动
    touchStart(e) {
      console.log(e)
      this.startX = e.touches[0].clientX // 记录滑动开始的位置
    },
    // 滑动结束
    touchEnd(e) {
      // 记录结束位置
      this.endX = e.changedTouches[0].clientX
      // 只有可滑动的列表大于1时才执行滑动操作
      if (this.swiperList.length > 1) {
        // 左滑
        if (this.startX - this.endX > 30) {
          this.throttle('next')
        }
        // 右滑
        if (this.startX - this.endX < -30) {
          this.throttle('prev')
        }
      }
      this.startX = 0
      this.endX = 0
    },
    throttle(type) {
      if (this.flag) {
        this.flag = false
        if (type == 'prev') {
          this.prevFun()
        } else {
          this.nextFun()
        }
        setTimeout(() => {
          this.flag = true
        }, 100) // 节流间隔时间
      }
    },
    // 上一张
    prevFun() {
      if (this.leftVal == 0) {
        // 判断显示的图片 是 第一张时执行
        // this.imgList.length是指循环图片数组的图片个数
        this.ition = 0 // 将过渡时间变成0，瞬间位移到最后一张图
        this.currentIndex = this.swiperList.length - 1 // 将高亮小点改为最后一张图
        this.leftVal = this.swiperList.length * this.swiperWidth // 瞬间移动
        setTimeout(() => {
          // 通过延时障眼法,归原过渡时间,执行真正的“上一张”函数
          this.ition = 0.8
          this.leftVal -= this.swiperWidth
        }, this.ition * 1000)
      } else {
        // 判断显示的图片 不是 第一张时执行
        this.ition = 0.8
        this.leftVal -= this.swiperWidth
        this.currentIndex--
      }
    },
    // 下一张
    nextFun() {
      console.log(this.leftVal, (this.swiperList.length - 1) * this.swiperWidth)
      if (this.leftVal == (this.swiperList.length - 1) * this.swiperWidth) {
         debugger
        // 判断显示的图片 是 最后一张时执行
        this.ition = 0.8
        this.leftVal += this.swiperWidth
        this.currentIndex = 0
        setTimeout(() => {
          this.ition = 0
          this.leftVal = 0
        }, this.ition * 1000)
      } else {
        // 判断显示的图片 不是 最后一张时执行
        this.ition = 0.8
        this.leftVal += this.swiperWidth
        this.currentIndex++
      }
    },
    // 点击指示器
    tapIndicator(index) {
      this.ition = 0.8
      this.leftVal = index * this.swiperWidth
      this.currentIndex = index
    },
    previewImg() { 
      console.log(32233223)
    }
  },
}
</script>
<style lang="less" scoped>
.carousel_container {
  .carousel_content {
    position: relative;
    margin: 0 auto;
    .leftBtn,
    .rightBtn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      display: flex;
      align-items: center;
      font-size: 24px;

      i {
        font-weight: bold;
      }
    }
    .leftBtn {
      left: 0px;
    }
    .rightBtn {
      right: 0px;
    }
    .swipers {
      position: relative;
      box-sizing: border-box;
      cursor: pointer;
      overflow: hidden;
      margin: 0 auto;
      -webkit-tap-highlight-color: transparent;
      &_move {
        position: absolute;
        top: 0px;
        left: 0px;
        min-width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        &_item {
          flex-shrink: 0;
          height: 100%;
          display: flex;
          align-items: center;
          img {
            height: 100%;
            border-radius: 4px;
            margin: 0 5px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .indication_point {
    display: flex;
    justify-content: center;
    margin: 10px 0;
    .indication_point_content {
      display: flex;
      justify-content: center;
      background-color: rgb(241,241,241);
      height: 12px;
      border-radius: 25px;
      div {
        width: 10px;
        cursor: pointer;
      }
      .indication_active {
        width: 18px;
        background-color: #c61932;
        border-color: #c61932;
        border-radius: 25px;
      }
    }
  }
}
</style>